<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Tab Demos</title>
	
	<script src="../../../../scripts/jquery.js" type="text/javascript"></script>
	
	<script src="../../../../scripts/jquery_ui/jquery.ui.core.js" type="text/javascript" ></script>
	<script src="../../../../scripts/jquery_ui/jquery.ui.widget.js" type="text/javascript" ></script>
	
	<link  href="../../../../themes/default/ui.css" type="text/css" rel="stylesheet" />
	
	<script src="../jquery.ui.tabs.js" type="text/javascript"></script>
	<link  href="../jquery.ui.tabs.css" rel="stylesheet" type="text/css" />
		
	<link type="text/css" href="../../../demos.css" rel="stylesheet" />
<!-- 换肤 -->
	<script type="text/javascript" src="../../../theme_cookie.js"></script>
	<script>
		$( function(){
			var $tabs = $('#tabs-api').tabs({
				closable:true,
				tabs:[
					{label:'tab1',content:'apitabs-1'},
					{label:'tab2',content:'apitabs-2'}
				],
				add: function(event, ui) {
					//callback
				},
				tabClosing:function(event,ui){
					alert('tab closing......') ;
					return true ;
				},
				tabClosed:function(){
					alert('tab closed') ;
					return true ;
				},
				height:'100px'
			});

			//添加tab也控制区域
			var $tab_title_input = $('#tab-title-api'), $tab_content_input = $('#tab-content-api');
			var tab_counter = 3 ;
			
			$('#add-api').click( function(){
				var tab_title = $tab_title_input.val() || 'Tab '+tab_counter;
				var tab_content = $tab_content_input.val() || 'Tab '+tab_counter+' content.';
				$('#tabs-api').tabs().add({
					url: '#tabs-add-'+tab_counter,
					label:tab_title,
					panel:tab_content,
					img:'../../../../themes/common/images/icons/edit.png'
				});
				tab_counter++;
			} ) ;
		} );
	</script>
</head>

<body>

		<div id='content-api' class='demo'>
			<h1></h1>
			tab标题：<input type='text' id='tab-title-api'> 
			tab内容：<input type='text' id='tab-content-api'> &nbsp;&nbsp;&nbsp;  <a href="javascript:void(0)" id='add-api'>创建tab</a>
			<br /><br />
			tab序号：<input type='text' style='width:50px' id='tab-index'> &nbsp; &nbsp;
			<a href="javascript:" onclick="$('#tabs-api').tabs().remove({'index':$('#tab-index').val()})">删除tab</a> &nbsp; &nbsp;
			<a href="javascript:" onclick="$('#tabs-api').tabs().disable({'index':$('#tab-index').val()})">失效tab</a> &nbsp; &nbsp;
			<a href="javascript:" onclick="$('#tabs-api').tabs().enable({'index':$('#tab-index').val()})">有效tab</a> &nbsp; &nbsp;
			<a href="javascript:" onclick="$('#tabs-api').tabs().hide({'index':$('#tab-index').val()})">隐藏tab</a> &nbsp; &nbsp;
			<a href="javascript:" onclick="$('#tabs-api').tabs().show({'index':$('#tab-index').val()})">显示tab</a> &nbsp; &nbsp;
			<a href="javascript:" onclick="$('#tabs-api').tabs().active({'index' : $('#tab-index').val()})">选择tab</a> &nbsp; &nbsp;
			<br/><br/>
			<div id="tabs-api">
				<div id="apitabs-1">
					<p>tab1 content ..............................</p>
				</div>
				<div id="apitabs-2">
					<p>tab2 content ..............................</p>
				</div>
			</div>
		</div>
</body>
</html>